<?php $translate = $this->translate ?>
<?php $fans      = $this->fans ?>
<?php $index     = 0 ?>
<?php $rank      = $this->offset - FAN_PER_PAGE + 1?>

<?php if ($this->offset == FAN_PER_PAGE): ?>
    <?php $first_fan = $fans[0] ?>
    <div class='wrap-first-fan'>
        <div class='rank'>
            <?php echo $rank ?>
        </div>
        <div class='cover'>
            <?php $cover_data = $this->facebook->getCover($first_fan['id_social_user']) ?>
            <?php $source_cover = $cover_data['source']; ?>
            <?php $offset_y = $cover_data['offset_y']; ?>
            <img src='<?php echo $source_cover ?>' width='100%' style='top:-<?php echo $offset_y ?>px'/>
        </div>
        <div class='wrap-report'>
            <div class='report'>
                <div class='fan-name' id='name_<?php echo $first_fan['id_social_user'] ?>'>
                    <?php echo $first_fan['user_name']; ?>
                </div>
                <script>
                    FB.api("/" + <?php echo $first_fan['id_social_user'] ?> + "?fields=name", function(data) {
                        var id_social = data.id;
                        $("#name_" + id_social).html(data.name);
                    });
                </script>
                <div class='report-detail'>
                    <div class='posts report-icon'>
                        <?php echo $first_fan['posts'] . ' ' . $translate->_("POSTS") ?>
                    </div>
                    <div class='comments report-icon'>
                        <?php echo$first_fan['comments'] . ' ' . $translate->_("COMMENTS") ?>
                    </div>
                    <div class='likes report-icon'>
                        <?php echo $first_fan['likes'] . ' ' . $translate->_("LIKES") ?>
                    </div>
                </div>
                <div class='view-detail'>
                    <?php
                    $url = $this->url(array(
                                        "module" => "tab",
                                        "action" => "viewdetail",
                                        "uid"    => $first_fan['id_social_user'],
                                        'pid'    => $this->id_social_page,
                                        'rank'   => $rank++
                                     ))
                    ?>
                    <a href='<?php echo $url ?>' style='color: yellow'>
                        <?php echo $translate->_("VIEW_DETAIL") ?>
                    </a>
                </div>                                           
            </div>  
            <div class='total-point' style='top: 15px'>
                <?php echo $first_fan['total_point'] . ' ' . $translate->_("POINTS") ?>
                <div class='wrap-vote'>
                    <?php if ($this->can_vote): ?>
                        <?php if ($first_fan['voted'] == true): ?>
                            <a href='javascript:void(0)' class='gray-button' onclick="unVote(event, '<?php echo $first_fan['voted'] ?>')">
                            <span class='vote-icon'>Unvote</span>
                        <?php else: ?>
                            <a href='javascript:void(0)' class='gray-button' onclick="vote(event, '<?php echo $first_fan['id_social_user']?>')">
                            <span class='vote-icon'>Vote</span>
                        <?php endif; ?>
                    <?php else: ?>
                        <?php if ($first_fan['voted']): ?>
                            <div class='gray-button'>
                                <span class='disabled-vote-icon'>Voted</span>
                            </div>
                        <?php endif; ?>
                    <?php endif; ?>
                    </a>
                </div>
            </div>                    
        </div>
        <div class='avatar'>
            <img src='<?php echo $this->facebook->getAvatar($first_fan['id_social_user'], 200, 200); ?>'/>
        </div>
    </div>
    <?php unset($fans[0]) ?>
<?php endif; ?>

<?php foreach ($fans as $fan): ?>
    <div class='fan'>
        <div class='rank'>
            <?php echo $rank + $index ?>
        </div>
        <div class='wrap-fan-detail'>
            <div class='avatar'>
                <img src='<?php echo $this->facebook->getAvatar($fan['id_social_user']) ?>'/>
            </div>
            <div class='fan-detail'>        
                <div class='fan-name' id='name_<?php echo $fan['id_social_user']?>'>
                    <?php echo $fan['user_name'] ?>
                </div>
                <script>
                    FB.api("/" + <?php echo $fan['id_social_user'] ?> + "?fields=name", function(data) {
                        var id_social = data.id;
                        $("#name_" + id_social).html(data.name);
                    });
                </script>
                <div class='report-detail'>
                    <div class='posts report-icon'>
                        <?php echo $fan['posts'] . ' ' . $translate->_("POSTS") ?>
                    </div>
                    <div class='comments report-icon'>
                        <?php echo $fan['comments'] . ' ' . $translate->_("COMMENTS") ?>
                    </div>
                    <div class='likes report-icon'>
                        <?php echo $fan['likes'] . ' ' . $translate->_("LIKES") ?>
                    </div>
                </div> 
                <div>
                    <?php
                    $url = $this->url(array(
                                        "module" => "tab",
                                        "action" => "viewdetail",
                                        "uid"    => $fan['id_social_user'],
                                        'pid'    => $this->id_social_page,
                                        'rank'   => $rank + ($index++)                     
                                     ))
                    ?>
                    <a href='<?php echo $url ?>' class='view-detail blue-text'>
                        <?php echo $this->translate->_("VIEW_DETAIL") ?>
                    </a>
                </div> 
                <div class='total-point'>
                    <?php echo $fan['total_point'] . ' ' . $translate->_("POINTS") ?>
                    <div class='wrap-vote'>
                        <?php if ($this->can_vote): ?>
                            <?php if ($fan['voted'] === true): ?>
                                <a href='javascript:void(0)' class='gray-button' onclick="vote(event, '<?php echo $fan['id_social_user']?>')">    
                                    <span class='vote-icon'>Unvote</span>
                            <?php else: ?>                        
                                <a href='javascript:void(0)' class='gray-button' onclick="unVote(event, '<?php echo $fan['voted'] ?>')">    
                                    <span class='vote-icon'>Vote</span>
                            <?php endif; ?>
                            </a>
                        <?php else: ?>
                            <?php if ($fan['voted'] === true): ?>
                                <div class='gray-button'>    
                                    <span class='disabled-vote-icon'>Voted</span>
                                </div>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>                    
                </div>            
            </div>  
        </div> 
    </div>        
<?php endforeach; ?>
<div class='loader' id='view-more-loader'>
    <img src='<?php echo $this->baseUrl() . '/images/loader.gif'?>'/>
</div>
<?php if (sizeof($fans) >= FAN_PER_PAGE - 1): ?>
    <a href='javascript:void(0)' id='wrap-view-more'>
        <div class='blue-box' onclick='viewMore();'>
            <span>
                View More
                <span class='icon down-arrow'></span>
            </span>
        </div>
    </a>
<?php endif; ?>